<template>
  <table class="pure-table">
    <thead>
      <tr>
        <th>参数</th>
        <th>值</th>
        <th>测试值</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in requestData" :key="index">
        <td>
          <el-input v-model="item.key" placeholder="请输入"></el-input>
        </td>
        <td>
          <el-select
            v-model="item.value"
            placeholder="请选择值"
            allow-create
            filterable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </td>
        <td>
          <el-input v-model="item.testValue" placeholder="请输入"></el-input>
        </td>
        <td><span class="del" @click="delRow(index)">删除</span></td>
      </tr>
      <tr>
        <td colspan="3">
          <el-button type="primary" @click="addRow">+增加参数</el-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  emits: ["callRequest"],
  props: ["tableData", "mode"],
  setup(props, ctx) {
    const store = useStore();
    const requestData = ref([]);
    const delRow = (index) => {
      requestData.value.splice(index, 1);
    };
    const storeOptions = () => {
      let optionList = store.state.app.serviceBody.inParamsList || [];
      let list = optionList.map((item) => {
        return "${" + item.paramName + "}";
      });
      return list;
    };
    const options = ref(storeOptions());
    const addRow = () => {
      requestData.value.push({ key: "", value: "", testValue: "" });
      console.log(requestData.value);
    };
    watch(
      () => requestData,
      (newData, oldData) => {
        ctx.emit("callRequest", requestData.value);
      },
      { deep: true }
    );
    watch(
      () => props.tableData,
      (newData, oldData) => {
        requestData.value = props.tableData;
      },
      { deep: true }
    );
    watch(
      () => store.state.app.serviceBody.ifParam.adptIfCfgHttp.inParamsFormat,
      (val) => {
        if (props.mode == "headers") {
          if (val == "JSON") {
              requestData.value.push({ key: "Content-Type", value: "application/json", testValue: "application/json" });
          }else{
              requestData.value.map((item,index)=>{
                  if (item.key == "Content-Type") {
                      requestData.value.splice(index, 1);
                  }
              })
          }
        }
        
      },
      { deep: true }
    );
    onMounted(() => {
    });
    return {
      requestData,
      addRow,
      delRow,
      options,
    };
  },
});
</script>
